<!DOCTYPE html>
<html>
  <head>
    <script src="../../dist/jspsych.js"></script>
    <script src="../../dist/plugin-html-keyboard-response.js"></script>
    <link rel="stylesheet" href="../../dist/jspsych.css" />
    <style>
      .flanker-stimulus {
        font-size: 500%;
      }
      .debrief-text {
        font-size: 25px;
      }
    </style>
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });
    
    var test_stimuli = [
      { stimulus: "<<<<<", data: { stim_type: 'congruent'} },
      { stimulus: ">>>>>", data: { stim_type: 'congruent'} },
      { stimulus: "<<><<", data: { stim_type: 'incongruent'} },
      { stimulus: ">><>>", data: { stim_type: 'incongruent'} }
    ];

    var test = {
      timeline: [{
        type: jsPsychHtmlKeyboardResponse,
        choices: ["ArrowLeft", "ArrowRight"],
        stimulus: jsPsych.timelineVariable('stimulus'),
        data: jsPsych.timelineVariable('data'),
        post_trial_gap: 1500,
        response_ends_trial: true,
        css_classes: ['flanker-stimulus']
      }],
      timeline_variables: test_stimuli,
      sample: {type: 'fixed-repetitions', size: 2}
    };

    var debrief = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: function() {
        var congruent_rt = Math.round(jsPsych.data.get()
          .filter({stim_type: 'congruent'}).select('rt').mean());
        var incongruent_rt = Math.round(jsPsych.data.get().filter({stim_type: 'incongruent'}).select('rt').mean());
        return "<p>Your average response time for congruent trials was <strong>" + congruent_rt + "ms</strong>.</p>"+
        "<p>Your average response time for incongruent trials was <strong>" + incongruent_rt + "ms</strong>.</p>";
      },
      css_classes: ['debrief-text']
    };

    var timeline = [];
    timeline.push(test);
    timeline.push(debrief);

    jsPsych.run(timeline);

  </script>
</html>
